<template>
    <div class="class-tabs">
      <ul>
        <li :class="index === 0 ? 'active' : null" v-for="(item, index) in topicClassifyList" :key="item.id" @click="clickLi($event, item.id)">
          <span>
            <i :class="['iconfont' , item.icon] "></i>
          </span>
        </li>
<!--        <li><span><i class="iconfont icon-qita2"></i></span></li>-->
<!--        <li><span><i class="iconfont icon-mianshi"></i></span></li>-->
<!--        <li><span><i class="iconfont icon-cuotiben3"></i></span></li>-->
        <div class="indicator"></div>
      </ul>
    </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {queryConurseClassifyList, queryConurseClassifySecondList} from "@/api/conurseClassify.ts";

let topicClassifyList = ref<ConurseClassifyType[]>([])
let topicTwoClassifyList = ref<ConurseClassifyType[]>([])
const emit = defineEmits()


const clickLi = (event:any, id:number) => {
  // 修改图标样式
  const lis = document.querySelectorAll(".active");
  lis.forEach(item => {
    item.classList.remove("active")
  })
  event.currentTarget.classList.add("active")
  // 获取数据
  getTwoClassifyList(id)
}

// 获取一级分类
const getOneClassifyList = async () => {
  emit('changeLoading', true)
  let {data} = await queryConurseClassifyList();
  topicClassifyList.value = data.data
  await getTwoClassifyList(topicClassifyList.value[0].id)
}
// 获取二级分类数据
const getTwoClassifyList = async (id:number) => {
  emit('changeLoading', true)
  let {data} = await queryConurseClassifySecondList(id);
  topicTwoClassifyList.value = data.data
  // 传递数据
  emit('getClassifyList', topicTwoClassifyList.value)
  emit('changeLoading', false)
}
// 初始化函数
const init = async () => {
  await getOneClassifyList()
}
init()

</script>

<style scoped lang="less">
// 导航栏 Tabs
.class-tabs {
  position: relative;
  width: 15.64rem;
  height: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--hello-bk);
  border-radius: .16rem;
  margin: 0.9rem 0 0.2rem 0;
  border: 1px solid var(--tabs-border-color);

  ul {
    display: flex;

    width: 7.2rem;
    margin: 0;
    padding: 0;

    .indicator {
      position: absolute;
      top: -0.7rem;
      width: 1.4rem;
      height: 1.4rem;
      background-color: var(--hello-bk);
      border-radius: 50%;
      z-index: 1;
      transition: transform .5s;
    }
    //
    .indicator::before {
      content: '';
      position: absolute;
      top: 0.1rem;
      left: -0.56rem;
      width: 0.6rem;
      height: 0.6rem;
      background: transparent;
      border-radius: 50%;
      box-shadow: 0.3rem 0.36rem var(--hello-bk);

    }
    //
    .indicator::after {
      content: '';
      position: absolute;
      top: 0.1rem;
      right: -0.56rem;
      width: 0.6rem;
      height: 0.6rem;
      background: transparent;
      border-radius: 50%;
      box-shadow: -0.3rem 0.36rem var(--hello-bk);
    }

  }

  ul li {
    display: flex;
    justify-content: center;
    height: 1rem;
    flex: 1;
    position: relative;
    list-style: none;
    z-index: 2;



    span {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
      cursor: pointer;
      transition: .35s;
      transition-delay: 0s;

      i {
        color: var(--tabs-icon-color);
        font-size: .50rem;
      }
    }

    span::before {
      content: '';
      position: absolute;
      top: 0.13rem;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--tabs-hover-bk);
      border-radius: 50%;
      filter: blur(0.09rem);
      opacity: 0;
      transition: .5s;
      transition-delay: 0s;
      z-index: -1;
    }

  }

  li:nth-child(1).active~.indicator {
    transform: translateX(calc(1rem * 0));
  }
  li:nth-child(2).active~.indicator {
    transform: translateX(calc(1.8rem * 1));
  }
  li:nth-child(3).active~.indicator {
    transform: translateX(calc(1.8rem * 2));
  }
  li:nth-child(4).active~.indicator {
    transform: translateX(calc(1.8rem * 3));
  }

  .active span{
    position: relative;
    background-color: var(--tabs-hover-bk);
    transform: translate(-0.19rem, -0.54rem);
    transition-delay: 0.1s;

    i {
      color: var(--user-name-color);
    }
  }


  .active span::before {
    opacity: 0.5;
    transition-delay: .1s;
  }


}
</style>